<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="orgNo" 
                      @updateModelValue="changeqiye"
                      :optionlist="qiyelist"
                      :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="value"
                    size="small"
                    value-format="yyyy-MM"
                    type="monthrange"
                    range-separator=""
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="13" style="text-align: right;"> 
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                   <el-button size="small" type="primary" @click="submit">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
       <!-- 封装引入表头 -->
       <div style="display:flex;justify-content:space-between;">
        <div>月度企业负荷电量分析</div>
        <div class="title">
          <TopTitle @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTitle>
        </div>
       </div>
       <!-- 封装引入表格 -->
       <div class="table">
        <TableColumn ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData" :issize="iissize"></TableColumn>
       </div>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import {getmonthlistapi ,exportmonthapi} from '@/api/keynote'
import { getuserlistapi } from '@/api/analysis'
import TopTitle from '@/components/TopTitle/index.vue'
import  TableColumn  from '@/components/Table/index.vue';
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    TableColumn
 },
  data() {
    return {
      iissize:'medium',
      orgNo:[],
      value:'',
      qiyelist: [],
      tableConfig: [
      { label: '企业名称', prop: 'companyName',width:'270' },
        { label: '年月', prop: 'dateStr',center:'center'},
        { label: '尖(kWh)', prop: 'epowerJsd' ,center:'right'},
        { label: '峰(kWh)', prop: 'epowerFsd' ,center:'right'},
        { label: '平(kWh)', prop: 'epowerPsd',center:'right'},
        { label: '谷(kWh)', prop: 'epowerGsd' ,center:'right'},
        { label: '总电量(kWh)', prop: 'epowerTotal' ,center:'right',width:'120'},
        { label: '峰谷占比', prop: 'fgPercent' ,center:'right'},
        { label: '电度电费(元)', prop: 'degreeCharge' ,center:'right',width:'120'},
        { label: '平均电价(元/kWh)', prop: 'avgPrice',width:'150',center:'right'},
        { label: '最高负荷', prop: 'max' ,center:'right'},
        { label: '最高负荷发生时间', prop: 'maxTime',width:'170',center:'center'},
      ],
      tableData:[]
    };
  },

  async mounted() {
    const res = await getuserlistapi()
    this.qiyelist = res.data.list
    this.orgNo=this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo :res.data.list[0].bizOrgNo
    this.gettime() 
    this. getlist() 
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      this.$store.commit('setuserobject', val)
    },
    submit() {
      this.getlist()
    },
    // 获取表格数据
    async getlist() {
      this.$refs.TableColumn.loading=true
      const orgName=this.qiyelist.filter(ele=>ele.bizOrgNo==this.orgNo)[0].bizOrgName
      const res = await getmonthlistapi({
        endMonth: this.value[1],
        startMonth: this.value[0],
        orgNo:this.orgNo,
        orgName:orgName
      })
      this.tableData = res.data.list
      this.$refs.TableColumn.loading=false
    },
    // 重置
    chongzhi() {
      this.orgNo=this.qiyelist[0].bizOrgNo
    this.gettime() 
    this. getlist() 
    },
    // 刷新
    shuaxin() {
      this.getlist()
      this.$message.success('数据刷新成功')
    },
    // 导出
    async daochu() {
      const orgName=this.qiyelist.filter(ele=>ele.bizOrgNo==this.orgNo)[0].bizOrgName
      const res = await exportmonthapi({
        endMonth: this.value[1],
        startMonth: this.value[0],
        orgNo:this.orgNo,
        orgName:orgName,
        isParams: true
      })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '负荷特性分析.xls')
    },
  // 获取当前时间戳
    gettime() {
      this.value=[]
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      this.value.push(year +'-'+ '01')
      this.value.push(year+'-'+ month)
    },
  // 调节表格密度
 command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dengji{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    padding: 20px;
    background-color: #fff;
    height: calc(100% - 90px);
    .title{
      margin-bottom: 15px;
    }
    .table{
      height: 93%;
    }
  }
}
</style>